﻿@model Nop.Plugin.Widgets.BsProductVideo.Models.PublicInfoModel
@{
    Layout = "";


}
@using Nop.Web.Framework.UI

@foreach (var embedVideo in Model.EmbedVideoRecordModels)
{
    <div class="video-holder">
        <a class="video-thumb">
            <img onclick="PlayVideo(@embedVideo.Id)" src="@embedVideo.VideoThumbUrl" alt="VideoThumpLink" data-embedvideohtmlcode="@embedVideo.EmbedVideoHtmlCode" />
        </a>

    </div>
    <div class="video-output video-@embedVideo.Id"></div>
    <div id="embedvideo_@embedVideo.Id" class="embeded-video" style="display:none">
        @Html.Raw(@embedVideo.EmbedVideoHtmlCode)
    </div>
}

<script>
    function PlayVideo(id) {
        $(".video-output").hide();
        var divId = "#embedvideo_" + id;
        var videoClass = ".video-" + id;
        //$(".gallery .picture").html($(divId).html());
        $("#sevenspikes-cloud-zoom").hide();
        $(videoClass).html($(divId).html());
        $(videoClass).show();
    }

    if ($(".picture-thumbs").length > 0) {
        $(".picture-thumbs").append($(".video-holder > a"));
    }
    else {
        $(".gallery.sevenspikes-cloudzoom-gallery").append("<div class='picture-thumbs'></div>")
        $(".picture-thumbs").append($(".video-holder > a"));
    }

    $(".video-output").insertAfter($("#sevenspikes-cloud-zoom"));
    $(".picture-thumbs a.cloud-zoom-gallery").on("click", function () {
        $(".video-output").empty();
        $(".video-output").hide();
        $("#sevenspikes-cloud-zoom").show();
    });

</script>